$typeList: primary, success, warning, danger, info;
.sc-alert {
  /* 定义不同样式下的中间变量 */
  @each $type in $typeList {
    /************* #{$type}开始 *************/
    --sc-alert-text-color-#{$type}: var(--sc-color-#{$type});
    --sc-alert-bg-color-#{$type}: var(--sc-color-#{$type}-light-9);
    /************* #{$type}结束 *************/
  }
  /* 默认 */
  --sc-alert-text-color: var(--sc-color-primary);
  --sc-alert-bg-color: var(--sc-color-primary-light-9);
}
.sc-alert {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: stretch;
  padding: 8px 16px;
  box-sizing: border-box;
  border-radius: var(--sc-border-radius-base);
  color: var(--sc-alert-text-color);
  background-color: var(--sc-alert-bg-color);
  font-weight: bold;
  transition: display 0.5s;
  &-content,
  &-icon {
    display: flex;
    align-items: center;
    margin-right: 0.5em;
  }
  &-content {
    flex: 1;
  }
  &-close {
    display: flex;
    align-items: center;
    cursor: pointer;
    height: 30px;
  }
}
@each $type in $typeList {
  .sc-alert--#{$type} {
    --sc-alert-text-color: var(--sc-color-#{$type});
    --sc-alert-bg-color: var(--sc-color-#{$type}-light-9);
  }
  .sc-alert--#{$type}.is-dark {
    --sc-alert-text-color: var(--sc-color-#{$type}-light-9);
    --sc-alert-bg-color: var(--sc-color-#{$type});
  }
}

.alert-enter-active,
.alert-leave-active {
  transition: opacity 0.3s ease; /* 过渡时间和效果 */
}

.alert-enter-from,
.alert-leave-to {
  opacity: 0; /* 隐藏时的状态 */
}
